<template>
  <div id="app" :style="img" v-loading="loading">
    <!-- <el-button type="primary" round class="qie" @click="qie"
      >切换图片</el-button -->
    >
    <router-view></router-view>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "App",
  data() {
    return {
      img: "",
      loading: false,
    };
  },
  methods: {
    qie() {
      this.loading = true;
      axios
        .get(
          "https://api.a20safe.com/api.php?api=9&key=e5f907b4ba1f08c8503433a5da97f0c9&lx=fengjing&hs=pc"
        )
        .then((res) => {
          console.log(res);
          if (res.data.code != 0) {
            this.$message({
              message: "接口出错，图片切换失败!",
              type: "error",
              showClose: true,
            });
          } else {
            this.img = `background: url('${res.data.data[0].imgurl}')`;
          }
        });
      this.loading = false;
    },
  },
  // mounted() {
  //   axios
  //     .get(
  //       "https://api.a20safe.com/api.php?api=9&key=e5f907b4ba1f08c8503433a5da97f0c9&lx=fengjing&hs=pc"
  //     )
  //     // res.data == "" || res.data.code == 103
  //     .then((res) => {
  //       // console.log(res.data.data[0].imgurl);
  //       // console.log(res.data.data[0].imgurl);
  //       this.img = `
  //       background: url('${res.data.data[0].imgurl}');
  //       `;
  //     });
  // },
};
</script>

<style>
#app {
  background: url("./images/back.jpg");
}
.qie {
  position: absolute;
  top: 20px;
  right: 520px;
  z-index: 100;
  background-color: rgb(89, 218, 238);
}
</style>
